<template>
    <div class="buttonWrapper">
        <div @click="setTest">
            <KindofButton :kindof="{color:'#c401ff',text:'保存',}"></KindofButton>
            <div class="title">保存试卷</div>
        </div>
        <div @click="setTest2">
            <KindofButton :kindof="{color:'#ff0195',text:'试卷集',}"></KindofButton>
            <div class="title">试卷集</div>
        </div>
        <div @click="reset">
            <KindofButton :kindof="{color:'#ff9501',text:'复位',}"></KindofButton>
            <div class="title">复位</div>
        </div>
    </div>
    <el-dialog
        title="请填写试卷的详细信息"
        v-model="dialogVisible"
        width="60%"
        :before-close="handleClose"
    >
        <el-form
            label-width="100px"
            :model="formLabelAlign"
            v-if="kindofForm === 'addtest'"
            :rules="rules"
            ref="ruleFormRef"
        >
            <el-form-item label="考卷名" prop="name">
                <el-input style="width:300px" v-model="formLabelAlign.name"/>
            </el-form-item>
            <el-form-item label="考试倒计时" prop="timevalue">
                <el-time-picker
                    style="width:300px"
                    v-model="formLabelAlign.timevalue"
                    placeholder="请选择时间"
                />
            </el-form-item>
<!--            <el-form-item label="考卷内容" prop="content">-->
<!--                <el-input :rows="5"-->
<!--                          type="textarea"-->
<!--                          style="width:300px"-->
<!--                          disabled-->
<!--                          placeholder="请先在图中选择线"-->
<!--                          v-model="formLabelAlign.content"/>-->
<!--            </el-form-item>-->
        </el-form>
        <div
            style="width: 100%"
            v-if="kindofForm === 'checktest'"
        >
            <el-table :data="taskShow" style="width: 100%"
                      row-key="id"
                      :expand-row-keys="expands"
                      @expand-change="expandChange"
                      ref="refTable">

                <el-table-column type="expand">
                    <template #default="props">
                        <h1>线:点</h1>
                        <div m="4">
                            <p m="t-0 b-2" v-for="(item,i) in FormtText" :key="i+'FormtText'">{{props.row.content[i]}}:{{ item }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"/>
                <el-table-column prop="name" label="试卷名称" width="100"/>
                <el-table-column prop="time" label="考试时间" width="100"/>
            </el-table>
        </div>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancle(ruleFormRef)">取消</el-button>
                    <el-button type="primary" @click="onsubmit(ruleFormRef)" v-if="kindofForm === 'addtest'">提交</el-button>
                </span>
        </template>
    </el-dialog>
</template>

<script setup>
import KindofButton from '@/components/custombutton/KindofButton.vue'

components:{
    KindofButton
}
;
import bus from 'vue3-eventbus'
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {useStore} from "vuex";
import {AddAnExam, GetAllExam, GetAnExamByExamID, GetAnExamByExamName,} from "../api/ajax/index.js";
import dayjs from "dayjs";
import {ElMessage} from "element-plus";

let ws = getCurrentInstance().proxy.$ws;
const store = useStore();
//弹出框是否显示
let dialogVisible = ref(false)
//由于使用同一个弹出框，kindofForm用于区分是哪一个按钮触发
let kindofForm = ref(null)
let ruleFormRef = ref()
//确认表单的校验
const rules = ref({
    name:[ { required: true, message: 'Please input Activity name', trigger: 'blur' }],
    timevalue:[{required: true, message: 'Please select Activity zone', trigger: 'blur'}],
    content:[{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
})
//setTest表格属性
let formLabelAlign = ref({
    name: '',
    timevalue: '',
    content: [],
})

function setTest() {
    kindofForm.value = 'addtest'
    dialogVisible.value = true
    console.log('lineArr', store.state.test.lineArr)
    store.state.test.lineArr.forEach(item => {
        formLabelAlign.value.content.push(item)
    })
    console.log(formLabelAlign.value.content)
}

//右上角X的事件
function handleClose() {
    dialogVisible.value = false
    cancle()
}


let taskShow = ref([])

async function setTest2() {
    dialogVisible.value = true
    kindofForm.value = 'checktest'
    try {
        let res = await GetAllExam();
        console.log(res.data.data);
        res.data.data.forEach(item => {
            taskShow.value.push({
                id: item.examId,
                name: item.examName,
                time: dayjs(JSON.parse(item.examContent).time).add(-8, "hour").format("HH:mm:ss"),
                createTime:item.createTime,
                content: JSON.parse(item.examContent).content
            });
        })
    } catch (err) {
        console.log('err', err)
    }
}

//复位
function reset() {
    taskShow.value = [];
    formLabelAlign.value = {
        name: '',
        timevalue: '',
        content: [],
    }
    bus.emit('reset')
}

//提交试卷样本
async function onsubmit(formEl) {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let Time = dayjs(formLabelAlign.value.timevalue)
            let ms = (Time.hour() * 60 * 60 + Time.minute() * 60 + Time.second()) * 1000
            let examContent = {
                time: ms,
                content: store.state.test.lineArr
            }
            console.log('examContent', examContent)
            let temp = {
                "examName": formLabelAlign.value.name, "examContent": JSON.stringify(examContent)
            }
            try {
                let res = await AddAnExam(temp)
                if(res.data.code === 200){
                    ElMessage('成功保存试卷')
                }
                formEl.resetFields()
            } catch (err) {
                console.log('错误断点', err)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

//取消
function cancle(formEl) {
    dialogVisible.value = false
    if (kindofForm.value === 'checktest') {
        taskShow.value = [];
    } else if (kindofForm.value === 'addtest') {
        formLabelAlign.value = {
            name: '',
            timevalue: '',
            content: [],
        }
    }
    formEl.resetFields()
}

let expands = ref([])
let FormtText = ref([])

async function expandChange(row, expandedRows) {
    if (expandedRows.length === 1) {
        let res = await GetAnExamByExamID({examID: row.id})
        FormtText.value = res.data.data.lineDescribe
        expandedRows.shift()
    } else {
        console.log('FUCK')
    }
}
</script>

<style scoped lang="scss">
.buttonWrapper {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    width: 100%;
    height: 100%;

    .title {
        text-align: center;
        color: #ffffff;
    }
}
h1{
    color: black;
    font-weight: bold;
    font-size: 20px;
}
</style>
